<template>
	<div class="redianciyun">
		<div v-if="$store.state.denglu" class="cidian">
			<div class="ciyunpinpai">
				<div class="ciyunpinpai1">
					<span>我的品牌</span>
				</div>
				<div class="ciyunpinpai2">
					查看功能介绍
				</div>
			</div>
			
			<div class="cidian_qian">
				<div class="cidian_tou">
					<div class="cidian_tou1">
						<span>热点词云</span>
					</div>
				</div>
				<div class="cidian_shen">
				  <wordcloud
				  class="ciyun"
				  :data="defaultWords"
				  nameKey="name"
				  valueKey="value"
				  :color="myColors"
				  :showTooltip="true"
				  :drawOutOfBound='false'
				  :wordClick="wordClickHandler">
				  </wordcloud>
				</div>
				<div class="cidian_xia">
					点击图中词云可查看相关视频
				</div>
			</div>
			
			<div class="ciyunshipin">
				<div class="ciyunshipin1">
					<div class="ciyunshipin1_1">
						<span>与“{{cititle}}”相关的视频</span>
					</div>
					<div class="ciyunshipin1_2">
						 <el-select v-model="value" clearable placeholder="提及更多">
						    <el-option
						      v-for="item in options"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						 </el-select>
					</div>
				</div>
				
				<div class="cidianshi">
					<div class="xiangshipin1" v-for="(item,index) in 6" :key="index">
						<div class="xiangshi1">
							<img src="../../../assets/img/ciyun.png" />
						</div>
						<div class="daomei">
							<div class="xiangshi2">
								一直流浪狗狗的前半生。#领样代替购买
							</div>
							<div class="xiangshi3">
								<div class="xiangshi3_1">
									<img src="../../../assets/img/dianzan3.png" />
									<span>{{zan | guolv}}</span>
								</div>
								<div class="xiangshi3_1">
									<img src="../../../assets/img/xinxitiao.png" />
									<span>{{zan | guolv}}</span>
								</div>
								<div class="xiangshi3_1">
									<img src="../../../assets/img/bofang1.png" />
									<span>{{zan | guolv}}</span>
								</div>
							</div>
							<div class="xiangshi4">
								<div class="xiangshi4_1">
									<img src="../../../assets/img/weibo.png" />
									<span>CN棍哥的温柔香GB</span>
								</div>
								<div class="xiangshi4_2">
									2020-10-25
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<jinzhi :wenben="wenben" v-else></jinzhi>
	</div>
</template>

<script>	
	//禁止看的页面
	import jinzhi from "@/components/components/jinzhiye.vue"
	//热点词云
	import wordcloud from 'vue-wordcloud'
	export default{
		name:"redianciyun",
		components:{
			wordcloud,
			jinzhi
		},
		data(){
			return{
				wenben:"平台的'热点'全汇聚，亮点、焦点爆款内容一网打进。",
				options: [
					{value: '选项1',label: '黄金糕'},
					{value: '选项2',label: '双皮奶'},
				],
				value: '',
				zan:23942,
				
				//词云
				cititle:'好久',
				myColors: ['#1f77b4', '#629fc9', '#94bedb', '#c9e0ef',"#FFCD40","#F2D689","#F0E0B7","#F0698C","#E4C1FE","#FDB1B1"],
				defaultWords: [
					{"name": "卡点","value": 200},
					{"name": "不想长大","value": 2},
					{"name": "抖音限定","value":3},
					{"name": "炫酷","value": 4},
					{"name": "原创","value": 5},
					{"name": "家乡的音乐","value": 6},
					{"name": "水电费","value": 7},
					{"name": "流行","value": 8},
					{"name": "热歌榜","value": 9},
					{"name": "飙升榜","value": 10},
					{"name": "看见音乐","value": 11},
					{"name": "周杰伦","value": 444},
					{"name": "Cat","value": 13},
					{"name": "fish","value": 14},
					{"name": "things","value": 15},
					{"name": "look","value": 16},
					{"name": "two","value": 17},
					{"name": "fun","value": 18},
					{"name": "水电费","value": 19},
					{"name": "流行","value": 20},
					{"name": "热歌榜","value": 100},
					{"name": "飙升榜","value": 22},
					{"name": "看见音乐","value": 23},
					{"name": "周杰伦","value": 24},
					{"name": "卡点","value": 25},
					{"name": "不想长大","value": 26},
					{"name": "抖音限定","value":27},
					{"name": "炫酷","value": 28},
					{"name": "原创","value": 29},
					{"name": "家乡的音乐","value": 30},
					{"name": "水电费","value": 51},
					{"name": "流行","value": 32},
					{"name": "热歌榜","value": 33},
					{"name": "飙升榜","value": 34},
					{"name": "看见音乐","value": 35},
					{"name": "周杰伦","value": 36},
					{"name": "Cat","value": 37},
					{"name": "fish","value": 38},
					{"name": "things","value": 39},
					{"name": "look","value": 40},
					{"name": "two","value": 41},
					{"name": "fun","value": 42},
					{"name": "水电费","value": 150},
					{"name": "流行","value": 44},
					{"name": "热歌榜","value": 45},
					{"name": "飙升榜","value": 46},
					{"name": "看见音乐","value": 47},
					{"name": "周杰伦","value": 48},
					{"name": "卡点","value": 200},
					{"name": "不想长大","value": 2},
					{"name": "抖音限定","value":3},
					{"name": "炫酷","value": 4},
					{"name": "原创","value": 5},
					{"name": "家乡的音乐","value": 6},
					{"name": "水电费","value": 7},
					{"name": "流行","value": 8},
					{"name": "热歌榜","value": 9},
					{"name": "飙升榜","value": 10},
					{"name": "看见音乐","value": 11},
					{"name": "周杰伦","value": 444},
					{"name": "Cat","value": 13},
					{"name": "fish","value": 14},
					{"name": "things","value": 15},
					{"name": "look","value": 16},
					{"name": "two","value": 17},
					{"name": "fun","value": 18},
					{"name": "水电费","value": 19},
					{"name": "流行","value": 20},
					{"name": "热歌榜","value": 100},
					{"name": "飙升榜","value": 22},
					{"name": "看见音乐","value": 23},
					{"name": "周杰伦","value": 24},
					{"name": "卡点","value": 25},
					{"name": "不想长大","value": 26},
					{"name": "抖音限定","value":27},
					{"name": "炫酷","value": 28},
					{"name": "原创","value": 29},
					{"name": "家乡的音乐","value": 30},
					{"name": "水电费","value": 51},
					{"name": "流行","value": 32},
					{"name": "热歌榜","value": 33},
					{"name": "飙升榜","value": 34},
				]
			}
		},
		activated() {
			
		},
		mounted:function(){
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
		},
		//过滤器
		filters:{
			guolv(shuzi){
				  if(shuzi>0){
					var wan=parseInt(shuzi).toString();
					var qumo=wan%10000;
					//粉丝数改变
					if(wan.length<5){
						shuzi=wan;
					}else if(wan.length>4 && wan.length<=8){
						let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
						shuzi=fen_si;
					}else if(wan.length>8){
						let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
						shuzi=fen_si;
					}
				  }
				  return shuzi
			}
		},
		methods:{
			//词云点击获取文本
			wordClickHandler(name, value, vm) {
				this.cititle=name;
			  console.log('wordClickHandler', name, value, vm);
			},
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.redianciyun{
		
		.cidian{
			
			.ciyunpinpai{
				margin-bottom:0.4rem ;
				
				.ciyunpinpai1{
					float: left;
					height: 100%;
					box-sizing: border-box;
					position: relative;
					
					span{
						font-size: 0.7rem;
						display: block;
						margin-left:0.8rem ;
						color: #333333;
						letter-spacing: 0.05rem;
					}
					
					span::before{
						content: "";
						display: block;
						position: absolute;
						left: 0;
						width: 0.3rem;
						height: 1rem;
						background-color: #0091FF;
					}
				}
				.ciyunpinpai2{
					margin-left:0.4rem ;
					margin-top:0.3rem ;
					float: left;
					cursor: pointer;
					color: #0091FF;
					font-size: 0.35rem;
				}
			}
			.ciyunpinpai::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.cidian_qian{
				margin-top:1rem ;
				padding: 0.4rem 0.8rem;
				background-color: #fff;
				border-radius:0.1rem ;
				.cidian_tou{
					margin-bottom:0.4rem ;
					.cidian_tou1{
						height: 100%;
						box-sizing: border-box;
						position: relative;
						
						span{
							font-size: 0.5rem;
							display: inline-block;
							margin-left:0.8rem ;
							color: #333333;
							letter-spacing: 0.05rem;
						}
						
						span::before{
							content: "";
							display: block;
							position: absolute;
							top: 0.4rem;
							left: 0;
							width: 0.2rem;
							height: 1rem;
							background-color: #0091FF;
						}
					}
				}
				.cidian_shen{
					width: 80%;
					margin: auto;
					
					.ciyun{
						overflow: hidden;
						cursor: pointer;
					}
				}
				.cidian_xia{
					cursor: pointer;
					color: #999;
					font-size: 0.4rem;
					text-align: center;
					padding: 0.6rem 0;
				}
				.cidian_xia:hover{
					color: #1890FF;
				}
			}
			
			.ciyunshipin{
				margin-top:1rem ;
				padding: 0.4rem 0.8rem;
				background-color: #fff;
				border-radius:0.1rem ;
				.ciyunshipin1{
					margin-bottom:0.4rem ;
					.ciyunshipin1_1{
						float: left;
						height: 100%;
						box-sizing: border-box;
						position: relative;
						
						span{
							font-size: 0.5rem;
							display: inline-block;
							margin-left:0.8rem ;
							color: #333333;
							letter-spacing: 0.05rem;
						}
						
						span::before{
							content: "";
							display: block;
							position: absolute;
							top: 0.4rem;
							left: 0;
							width: 0.2rem;
							height: 1rem;
							background-color: #0091FF;
						}
					}
					.ciyunshipin1_2{
						float: right;
					}
				}
				.ciyunshipin1::after{
					content: "";
					display: block;
					clear: both;
				}
				
				.cidianshi{
					margin-top:1rem ;
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;
					
					.xiangshipin1:hover{
						transition: all 0.6s ease;
						box-shadow: 0 0 0.2rem rgba(0,0,0,0.4);
						border-radius:0.1rem ;
					}
					.xiangshipin1{
						cursor: pointer;
						margin-bottom:0.4rem ;
						padding: 0.6rem 0.3rem;
						width: 31%;
						background-color: #fff;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.xiangshi1{
							img{
								width: 3.6rem;
								vertical-align: middle;
							}
						}
						.daomei{
							
							.xiangshi2{
								padding:0 0.8rem ;
								color: #333333;
								font-size: 0.4rem;
								
								overflow : hidden;
								text-overflow: ellipsis;
								display: -webkit-box; 
								-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
								-webkit-box-orient: vertical;
							}
							.xiangshi3{
								padding:0 0.8rem ;
								padding-top:0.6rem ;
								display: flex;
								justify-content: space-between;
								align-items: center;
								
								.xiangshi3_1{
									display: flex;
									justify-content: space-between;
									align-items: center;
									img{
										width: 0.4rem;
										vertical-align: middle;
									}
									span{
										display: block;
										// margin-top:-0.15rem ;
										margin-left:0.2rem ;
										color: #999999;
										font-size: 0.35rem;
									}
								}
							}
							.xiangshi4{
								padding:0 0.8rem ;
								padding-top:0.45rem ;
								display: flex;
								justify-content: space-between;
								align-items: center;
								.xiangshi4_1{
									display: flex;
									justify-content: space-between;
									align-items: center;
									img{
										width: 0.6rem;
										vertical-align: middle;
									}
									span{
										width: 3.2rem;
										margin-top:0.1rem ;
										display: block;
										margin-left:0.2rem ;
										color: #333333;
										font-size: 0.35rem;
										
										overflow : hidden;
										text-overflow: ellipsis;
										display: -webkit-box; 
										-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
										-webkit-box-orient: vertical;
									}
								}
								.xiangshi4_2{
									color: #999999;
									font-size: 0.35rem;
								}
							}
						}
					}
					.xiangshipin1::after{
						content: "";
						display: block;
						clear: both;
					}
				}
			}
		}
		
		.redianci{
			background-color: #fff;
			border-radius:0.1rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 3rem 0;
			
			.redianci1{
				flex: 1;
				
				.redainci1_1{
					width: 40%;
					margin: auto;
					p:nth-of-type(1){
						color: #999;
						font-size: 3rem;
					}
					p:nth-of-type(2){
						color: #333333;
						font-size: 0.5rem;
						line-height: 1rem;
						margin: 0.5rem 0;
					}
					p:nth-of-type(3){
						span{
							cursor: pointer;
							background-color: #0091FF;
							color: #fff;
							font-size: 0.4rem;
							padding: 0.2rem 0.3rem;
							border-radius:0.05rem ;
						}
					}
				}
			}
			.redianci2{
				margin-right:4rem ;
				flex: 1;
				
				img{
					width: 18rem;
				}
			}
		}
	}
</style>
<style  lang="scss">
	.el-submenu .el-menu-item {
	    height: 50px;
	    line-height: 50px;
	    padding: 0 0;
	    min-width: 1rem;
	}
</style>
